<template>	
	<div class="main-div">	
    <el-form  label-width="150px" class="form-demo" >
		<!-- 基本信息 -->
		<div class="header-div"><strong>基本信息</strong> <span style="color: #777777;font-size: 12px;">填写考试基本信息</span> </div>		
		<div style="width: 75%;">
		<el-form-item>
				<template #label>
					<span class="custom-label">考试名称</span>
				</template>
				<el-input v-model="form.testPaperName"></el-input>
			</el-form-item>
			<el-row>
				<el-col :span="11">
					<el-form-item>
						<template #label>
							<span class="custom-label">考试分类</span>
						</template>
						<el-select v-model="form.classification" placeholder="分类" style="width: 100%;" suffix-icon="">
							<el-option label="Zone one" value="shanghai" />
							<el-option label="Zone two" value="beijing" />
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="11">
					<el-form-item >
					<template #label>
						<span class="custom-label">考试状态</span>
					</template>
					<el-switch  v-model="form.startUsing"
						style="--el-switch-on-color: #64bd63; --el-switch-off-color: #dfdfdf"
						active-value="启用"
						inactive-value="禁用"
					></el-switch>
				</el-form-item>
				</el-col>
			</el-row>  
			<el-row>
			<el-col :span="11">
				<el-form-item  >
				<template #label>
					<span class="custom-label">设置考试</span>
				</template>
					<el-input v-model="form.setTestPaper"
					 placeholder="请选择考试"  @click="setPaper"
					></el-input>
			</el-form-item>
			</el-col>
			<el-col :span="11">
				<el-form-item >
				<template #label>
					<span class="custom-label">及格分数</span>
				</template>
				<el-input v-model="form.passMark" placeholder="60" class="input-with-span" >
					<template #append>
						<span>考试总分为:<el-link type="primary">0</el-link></span>
					</template>
				</el-input>
			</el-form-item>
			</el-col>
			</el-row>  
			
			<el-row>
			<el-col :span="11">
				<el-form-item>
				<template #label>
					<span class="custom-label">试题排序</span>
				</template>
				<el-select v-model="form.trySorting" placeholder="固定排序" style="width: 100%;" suffix-icon="CaretBottom">
					<el-option label="固定排序" value="固定" />
					<el-option label="随机排序" value="随机" />
			</el-select>
			</el-form-item>
			</el-col>
			<el-col :span="11">
				<el-form-item >
				<template #label>
					<span class="custom-label">考试展示</span>
				</template>
				<el-select v-model="form.tryShow" placeholder="整卷展示" style="width: 100%;" suffix-icon="CaretBottom">
					<el-option label="整卷展示" value="整卷" />
					<el-option label="单题展示" value="单题" />
			</el-select>
			</el-form-item>
			</el-col>
			</el-row>  
			
			<el-row>
			<el-col :span="11">
				<el-form-item>
				<template #label>
					<span class="custom-label">选项随机</span>
				</template>
				<el-select v-model="form.optionRandom" placeholder="固定排序" style="width: 100%;" suffix-icon="CaretBottom">
					<el-option label="固定排序" value="固定" />
					<el-option label="随机排序" value="随机" />
			</el-select>
			</el-form-item>
			</el-col>
			<el-col :span="11">
				<el-form-item >
				<template #label>
					<span class="custom-label">可考次数</span>
				</template>
				<el-input v-model="form.canTestTimes"></el-input>
			</el-form-item>
			</el-col>
			</el-row>  
			<el-form-item >
				<template #label>
					<span class="custom-label">考试说明</span>
				</template>
				<el-input v-model="form.testInstructions" type="textarea"></el-input>
			</el-form-item>
		</div>  
		<!-- 设置时间 -->
		<div class="header-div"><strong>时间设置</strong> <span style="color: #777777;font-size: 12px;">填写考试时间安排</span> </div>
		<div  class="div-time">
				<el-row>
					<el-col :span="11">
						<el-form-item >
							<template #label>
								<span class="custom-label">开考时间</span>
							</template>
							<el-date-picker
								v-model="form.startTime"
								type="date"
								style="width: 100%;"/>
						</el-form-item>
				</el-col>
				<el-col :span="11">
					<el-form-item >
							<template #label>
								<span class="custom-label">结束时间</span>
							</template>
							<el-date-picker
								v-model="form.endTime"
								type="date"
								style="width: 100%;"/>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="11">
					<el-form-item >
							<template #label>
								<span class="custom-label">考试时长</span>
							</template>
							<el-input v-model="form.testTime" class="input-with-span">
								<template #append>
									<span>分钟</span>
								</template>
							</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="11">
					<el-form-item label="结束时间">
							<template #label>
								<span class="custom-label">公布成绩</span>
							</template>
							<el-date-picker
								v-model="form.releaseTime"
								type="date"
								style="width: 100%;"
								/>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="11">
						<el-form-item >
							<template #label>
								<span class="custom-label">参加限制</span>
							</template>
							<el-input v-model="form.submitLimit" placeholder="0" class="input-with-span" >
								<template #prepend>
								<span>考试开始</span>
								</template>
								<template #append>
									<span>分钟后禁止参加考试</span>
								</template>
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="11">
						<el-form-item >
							<template #label>
								<span class="custom-label">交卷限制</span>
							</template>
							<el-input v-model="form.toLimit" placeholder="0" class="input-with-span" >
								<template #prepend>
								<span>考试开始</span>
								</template>
								<template #append>
									<span>分钟内不允许交卷</span>
								</template>
							</el-input>
					</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="11">
						<el-form-item >
							<template #label>
								<span class="custom-label">答案公布</span>
							</template>
							<el-select
								v-model="form.announcedAnswer"
								value-key="id"
								placeholder="不公布答案(成绩公布后，不公布正确答案)"
								style="width: 100%"
								suffix-icon="CaretBottom"
								>
								<el-option
									key="1"
									label="公布答案(成绩公布后，同时公布正确答案)"
									value="公布答案(成绩公布后，同时公布正确答案)"/>
								<el-option
									key="0"
									label="不公布答案(成绩公布后，不公布正确答案)"
									value="不公布答案(成绩公布后，不公布正确答案)"/>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="11">
						<el-form-item >
							<template #label>
								<span class="custom-label">查看详情</span>
							</template>
							<el-select
								v-model="form.checkDetails"
								value-key="id"
								placeholder="允许 考试开看历史答案详情"
								style="width: 100%"
								suffix-icon="CaretBottom"
								>
								<el-option
									key="1"
									label="允许 考生查看历史答案详情)"
									value="允许 考生查看历史答案详情"/>
								<el-option
									key="0"
									label="不允许 考生查看历史答案详情)"
									value="不允许 考生查看历史答案详情"/>
							</el-select>
						</el-form-item>
					</el-col>	
			</el-row>
		</div>		
		<!--考试对象  -->
		<div class="header-div"><strong>考试对象</strong> <span style="color: #777777;font-size: 12px;">设置参加考试的目标班级或学生</span> </div>
		<div style="width: 75%;">
			<el-form-item>
				<template #label>
					<span class="custom-label">考试班级</span>
				</template>
				<el-row v-for="item in form.classes" :key="item.id" 
					 >
					<el-tooltip content="点我删除" placement="bottom-end" effect="light">
						<el-button color="#23C6c8"
						 style="color: #fff; margin: 5px; padding: 6px 12px;"
						 @click="deleteClazz(item)">
							<span>{{ item.clazz }}<i class="iconfont icon-cha" style="color: #8a1f11;"></i></span>
						</el-button>
					</el-tooltip>
				</el-row>
				<el-row style="width: 100%;">
					<el-button color="#1C84C6" @click="choseClazz">添加</el-button>
					<el-button color="#ED5565" class="white" @click="clearClazz">清空</el-button>
				</el-row>
				
			</el-form-item>
			<el-form-item>
				<template #label>
					<span class="custom-label">考试学生</span>
				</template> 
				<el-row v-for="item in form.stus" :key="item.id" >
					<el-tooltip content="点我删除" placement="bottom-end" effect="light">
						<el-button color="#23C6c8"
						 style="color: #fff; margin: 5px; padding: 6px 12px;"
						 @click="deleteStu(item)">
							<span>{{ item.name }}<i class="iconfont icon-cha" style="color: #8a1f11;"></i></span>
						</el-button>
					</el-tooltip>
				</el-row>
				<el-row style="width: 100%;">
					<el-button color="#1C84C6" @click="choseStu">添加</el-button>
					<el-button color="#ED5565" class="white"  @click="clearStu">清空</el-button>
				</el-row>
			</el-form-item>
		</div>   
	</el-form>	
	
	<div class="div-footer">		
		   <el-button color="#1C84C6" @click="onSubmit">提交</el-button>
			<el-button @click="rollback" v-if="other=='other'">返回</el-button>
			<el-button @click="reSet" color="#ED5565" class="white" v-else>重新填写</el-button>
	</div>

	<!-- 关联考试的弹窗 -->
	 <el-dialog title="选择考试" v-model="editVisible" width="750">
		<template #header="{ close, titleId, titleClass }">
			<div class="my-header">
				<h4 :id="titleId" :class="titleClass">关联的考试</h4> 
			</div>
			</template>
		<SetPaper v-model:setTestPaper="form.setTestPaper"></SetPaper>
	</el-dialog>
	<!-- 选择班级的弹窗 -->
	 <el-dialog title="选择班级" v-model="classVisible" width="750">
		<template #header="{ close, titleId, titleClass }">
			<div class="my-header">
				<h4 :id="titleId" :class="titleClass">关联的考试</h4> 
			</div>
			</template>
		<TestClass v-model:classes="form.classes"></TestClass>
		<template #footer>
			<span class="dialog-footer">
				<el-button  @click="classVisible = false">关闭</el-button>
			</span>
		</template>
	
	</el-dialog> 

	<!-- 选择学生的弹窗 -->
	 <el-dialog title="选择学生" v-model="stuVisible" width="750">
		<template #header="{ close, titleId, titleClass }">
			<div class="my-header">
				<h4 :id="titleId" :class="titleClass">选择学生</h4> 
			</div>
			</template>
		<AddSut v-model:stus="form.stus"></AddSut>
		<template #footer>
			<span class="dialog-footer">
				<el-button  @click="stuVisible = false">关闭</el-button>
			</span>
		</template>
	</el-dialog>
</div> 
</template>

<script setup >
import { ref, reactive ,toRefs,onMounted,watch} from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Delete, Edit, Search, Plus,CaretBottom } from '@element-plus/icons-vue';
import SetPaper from '@/views/exam/examSubVue/SetPaper.vue'
import TestClass from '@/views/exam/examSubVue/TestClass.vue'
import AddSut from './AddSut.vue';
// 设置考试的弹窗
const editVisible = ref(false);
const setPaper=()=>{
	console.log('paaa>>')
	editVisible.value=true
}

const  classVisible = ref(false)
const choseClazz = ()=>{
	classVisible.value=true
}
//点我删除班级
const deleteClazz=(item)=>{
	let index = form.classes.indexOf(item)
	form.classes.splice(index,1)
}
//清空班级
const clearClazz = ()=>{
	form.classes=[]
}
//选择学生的弹窗
const stuVisible = ref(false)
const choseStu=()=>{
	stuVisible.value=true
}
//点我删除学生
const deleteStu=(item)=>{
	let index = form.stus.indexOf(item)
	form.stus.splice(index,1)
}
const clearStu=()=>{
    form.stus=[]
}
let form = reactive({
    id:'',
	testPaperName: '',//考试名称
	classification:'',//考试分类
	startUsing:'启用',//考试状态
	setTestPaper:'',//设置考试
	passMark:'',//几个分数
	trySorting :'',//试题排序
	tryShow:'',//考试展示
	optionRandom:'',//选项随机
	canTestTimes:'',//可靠次数
	testInstructions:'',//考试说明
	startTime:'',//开始时间
	endTime:'',//结束时间
    testTime:'',//考试时长
    releaseTime:'',//公布成绩
    submitLimit:'',//参加限制
    toLimit:'',//交卷限制
    announcedAnswer:'',//答案公布
    checkDetails:'',//查看详情
	classes:[],
	stus:[]
});

const props = defineProps({
	rowData:Object,
	other:String,
})
const {rowData,other} = toRefs(props)
// console.log(rowData?.value,'<<<<<row')
const emit = defineEmits(['upadate:rowData','change'])
/* watch(()=>props.rowData,(old,newX)=>{
	console.log('old',old,'newValue',newX,'页面数据发生变化')
	form.id=''
	form.testPaperName='' //考试名称
	form.classification=''//考试分类
	form.startUsing='启用'//考试状态
	form.setTestPaper=''//设置考试
	form.passMark=''//几个分数
	form.trySorting =''//试题排序
	form.tryShow=''//考试展示
	form.optionRandom=''//选项随机
	form.canTestTimes=''//可靠次数
	form.testInstructions=''//考试说明
	form.startTime=''//开始时间
	form.endTime=''//结束时间
    form.testTime=''//考试时长
    form.releaseTime=''//公布成绩
    form.submitLimit=''//参加限制
    form.toLimit=''//交卷限制
    form.announcedAnswer=''//答案公布
    form.checkDetails=''//查看详情
	form.classes=[]
	form.stus=[]
}) */

onMounted(()=>{
	console.log(rowData?.value,'createExam onMouted')
	// console.log(form.classes)
	if(rowData?.value){
		// form=rowData.value
	    // console.log(form,'asdffd')
	form.id =rowData?.value.id
	form.testPaperName=rowData?.value.testPaperName//考试名称
	form.classification=rowData?.value.classification//考试分类
	form.startUsing=rowData?.value.state//考试状态
	form.setTestPaper=rowData?.value.testPaperName//设置考试
	form.passMark=rowData?.value.passMark//及格分数
	form.trySorting =rowData?.value.trySorting//试题排序
	form.tryShow=rowData?.value.paperShow//考试展示
	form.optionRandom=rowData?.value.trySorting,//选项随机
	form.canTestTimes=rowData?.value.canTestTimes//可靠次数
	form.testInstructions=rowData?.value.testInstructions,//考试说明
	form.startTime=rowData?.value.startTime//开始时间
	form.endTime=rowData?.value.endTime//结束时间
	form.testTime=rowData?.value.testTime//考试时长
	form.releaseTime=rowData?.value.releaseTime//公布成绩
	form.submitLimit=rowData?.value.submitLimit//参加限制
	form.toLimit=rowData?.value.toLimit//交卷限制
	form.announcedAnswer=rowData?.value.announcedAnswer//答案公布
	form.checkDetails=rowData?.value.checkDetails//查看详情
	form.classes=rowData?.value.classes
	form.stus =rowData?.value.stus
		// titleEdit.value='修改题库'
		// console.log(form.id,'rrrr')
	}else{
		// titleEdit.value='创建题库'
		console.log(rowData,form,'rf')
	}
})

// 头部标题
let titleEdit = ref('创建题库')

//保存添加或者修改的数据 ---需要重新实现
const onSubmit = () => {
	
	//
};
//重置 
function reSet(){
	
}
//返回 
const rollback = ()=>{
  emit('change',true)
}
</script >
<style lang="less" scoped>
.input-with-span /deep/.el-input__inner{
	width: 40px;
}
.input-with-span /deep/.el-input-group__prepend {
  background-color: var(--el-fill-color-blank);
}
.input-with-span /deep/.el-input-group__append {
  background-color: var(--el-fill-color-blank);
}
.text-center{
	text-align: center;
}
// .el-form .el-input {
// 	width: 50%;
	
// }
// .el-form .el-textarea {
// 	width: 50%;
	
// }
.custom-label{
	font-size: 14px;
  	font-weight: 900;
  	color: #666;
}
.header-div{
	background-color: #F5F5F5;
	color: #666666;
	margin: 0px 0px 10px;
	padding: 10px 10px; 
	font-size: 14px;
}
.main-div{
	border: 1px solid #f0f0f0;
 padding: 0px,15px,15px,15px;
}
.white{
	color: #FFFFFF;
}
.div-time{
	width: 75%;
}
.div-footer{
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center; 
	border: 1px solid #f0f0f0; 
	padding: 5px 0px;
}

.my-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-bottom: 1px  solid #f0f0f0;
}
</style>